<div class="card card-link" *ngIf="$any(card).thingType === cardsType.LINK" (contextmenu)="contextMenu($event, menu)">
  <!-- Image à la une -->
  <div class="card-image flex-vertical">
    <img *ngIf="!!($any(card).imageId || $any(card).image)" class="card-image-element"
         src="{{$any(card).imageId ? '/api/image/'+$any(card).imageId : $any(card).image}}" loading="lazy" alt="{{$any(card).imageAlt}}" />
    <div class="description">
      <p nz-typography nzEllipsis nzEllipsisRows="3" class="card-image-desc link">{{$any(card).title}}</p>
      <p nz-typography nzEllipsis nzEllipsisRows="8" class="card-image-desc">{{$any(card).desc}}</p>
      <a nz-typography nzEllipsis href="{{$any(card).url}}" target="_blank" class="card-image-desc link"
         (click)="$event.stopPropagation()">{{$any(card).domain ? $any(card).domain : $any(card).url}}</a>
    </div>
  </div>
  <button nz-button nzType="primary" nzShape="circle" class="todo-button" *ngIf="isTodo" nz-tooltip="" nzTooltipTitle="Mark as done"
          (click)="markAsDone($event)">
    <span nz-icon nzType="check-circle" nzTheme="outline"></span>
  </button>
</div>

<ng-container *ngIf="$any(card).thingType === cardsType.MARKDOWN">
  <app-markdown-card (contextmenu)="contextMenu($event, menu)" [readonly]="true" [cardMode]="true"
                     [isTodo]="isTodo" [content]="$any(card).markdown" (markAsDone)="markAsDone($event)"
                     [id]="$any(card).id"></app-markdown-card>


</ng-container>

<div class="card card-tweet" *ngIf="$any(card).thingType === cardsType.TWEET" (contextmenu)="contextMenu($event, menu)">
  <div class="tweet-content flex-vertical">
    <img src="../../../assets/image/twitter_logo.png" alt="twitter logo" class="card-image-content tweet-image" height="30">
    <div [innerHTML]="$any(card).html"></div>
  </div>
  <button nz-button nzType="primary" nzShape="circle" class="todo-button" *ngIf="isTodo">
    <span nz-icon nzType="check-circle" nzTheme="outline" nz-tooltip="" nzTooltipTitle="Mark as done" (click)="markAsDone($event)"></span>
  </button>
</div>


<nz-dropdown-menu #menu="nzDropdownMenu">
  <ul nz-menu>
    <li nz-menu-item (click)="openNewTab()"><span nz-icon nzType="plus-square" nzTheme="outline"></span>&nbsp;Open new tab</li>

    <li nz-menu-item *ngIf="$any(card).thingType == cardsType.MARKDOWN" (click)="copyContent()">
      <span nz-icon nzType="copy" nzTheme="outline"></span>&nbsp;Copy Content
    </li>
    <li nz-menu-item *ngIf="$any(card).thingType !== cardsType.MARKDOWN"
        (click)="copyContent()"><span nz-icon nzType="copy" nzTheme="outline"></span>&nbsp;Copy URI
    </li>
    <li nz-menu-item *ngIf="$any(card).thingType !== cardsType.MARKDOWN" (click)="openLink($event)"><span nz-icon nzType="link" nzTheme="outline"></span>&nbsp;Open
      link
    </li>
    <li nz-menu-item (click)="closeMenu()"><span nz-icon nzType="close" nzTheme="outline"></span>&nbsp;Close Menu
    </li>
    <li nz-menu-item nzDanger (click)="deleteCard()"><span nz-icon nzType="delete" nzTheme="outline"></span>&nbsp;Delete Card</li>

  </ul>
</nz-dropdown-menu>
